<template>
  <el-row :gutter="20">
    <template v-for="(item,index) in columnData" :key="index">
      <el-col style="margin: 0" :span="item.colSpan">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.type === 'text'">
            <el-input
                v-model="columnModel[item.prop]"
                :placeholder="item.placeholder"
                :disabled="item.disabled || detailsbool"
            >
            </el-input>
          </template>
          <template v-else-if="item.type==='switch'">
            <el-switch
                v-model="columnModel[item.prop]"
                :disabled="item.disabled || detailsbool"/>
          </template>
          <template v-else-if="item.type==='select'">
            <el-select
                class="lock_input"
                v-model="columnModel[item.prop]"
                :disabled="item.disabled  || detailsbool"
                :filterable="item.isFilterable"
                :isMultiple="item.isMultiple"
                :clearable="item.clearable"
                :placeholder="item.placeholder"
                @change="formSelectChange($event,item,index)"
            >
              <el-option
                  v-for="(it,idx) in item.option"
                  :key="idx"
                  :label="it.label"
                  :value="it.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="item.type==='textarea'">
            <el-input
                type="textarea"
                :rows="2"
                :placeholder="item.placeholder"
                v-model="columnModel[item.prop]">
            </el-input>
          </template>
          <template v-else-if="item.type==='upload'">
            <div style="display: flex">
              <el-upload
                  v-if="!detailsbool || item.disabled"
                  class="upload-demo"
                  action
                  :before-upload="(file)=>{ beforeAvatarUpload(file,item,index)}"
                  :http-request="(file)=>{ httpRequest(file,item,index)}"
                  :file-list="item.imgUrlList"
                  list-type="picture"
              >
                <el-button type="primary" size="small">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">{{ item.placeholder }}</div>
                </template>
              </el-upload>
            </div>
          </template>
        </el-form-item>
      </el-col>
    </template>
  </el-row>
</template>

<script>
import {getCurrentInstance, reactive} from "vue";
import {uploadFile} from "@/api/rules"
export default {
  name: "formColumn",
  components: {},
  props: {
    columnData: {
      type: Array,
      default: () => []
    },
    columnModel: {
      type: Object,
      default: () => {
      }
    },
    detailsbool: {
      type: Boolean,
      default: false
    },
  },
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    let {columnModel} = reactive(props);
    const formSelectChange = (val, currentItem, $index) => {
      let obj = null;
      if (val != '') {
        obj = currentItem.option.find(item => item.value == val)
        if (obj != undefined && currentItem.propName != undefined) {
          columnModel[currentItem.propName] = obj.label
        }
      }
      context.attrs.onFormSelectEmit(val, currentItem, $index, obj)
    }

    const beforeAvatarUpload = (file, row, index) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (columnModel.imgUrlList.length > 4) {
        proxy.$message({
          type: "error",
          message: "不能超过4张图片!"
        })
        return false;
      }
      if (!isJPG) {
        proxy.$message({
          type: "error",
          message: "请上传 JPG和PNG 格式的图片!"
        })

      }
      if (!isLt2M) {
        proxy.$message({
          type: "error",
          message: "上传图片大小不能超过 2MB!"
        })
      }
      return isJPG && isLt2M
    }
    const httpRequest = async (file, row, index) => {
      let postData = new FormData()
      postData.append('myFile', file.file)
      postData.append('type', 1)//商品照片
      const {data} = await uploadFile(postData)
      proxy.$message({
        type: "success",
        message: "上传成功!"
      })
      let filedata = {
        name: data.key,
        url: data.fileUrl
      }
      columnModel.imgUrlList.push(filedata)
    }
    return {
      formSelectChange,
      beforeAvatarUpload,
      httpRequest
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>